<template>
  <view style="padding: 20rpx" class="animated fast fadeIn">
    <!-- 头像按钮  关注按钮 -->
    <view style="display: flex; justify-content: space-between; align-items: center">
      <view style="display: flex; align-items: center" @tap="openSpace">
        <image
          :src="props.item.picAddress"
          style="border-radius: 100%; width: 65rpx; height: 65rpx"
        />
        <!-- 昵称的发出时间 -->
        <view
          style="
            display: flex;
            align-items: center;
            margin-left: 15px;
            flex-direction: column;
            position: relative;
          "
        >
          <text style="font-size: 30rpx; margin-bottom: 10rpx">{{ props.item.username }}</text>
          <text style="color: #9d9d9d; font-size: 30rpx">{{ time }}</text>
        </view>
      </view>
      <view v-if="item.username !== user.userinfo.username">
        <!--未关注 -->
        <view
          class="cu-btn icon-guanzhu shadow-blur round bg-red.light animated"
          @tap="follow(index)"
          hover-class="animate__jello color"
          v-if="props.item.isfollow == 'false'"
        >关注</view>
        <!-- 已关注 -->
        <view
          class="cu-btn icon-guanzhu shadow-blur round bg-success animated"
          @tap="follow1(index)"
          hover-class="animate__jello color"
          v-else
        >已关注</view>
      </view>
    </view>
    <!-- 标题 -->
    <view class="cu-bar" style="margin-top: auto" @tap="openDetail">
      <view class="title">{{ props.item.title }}</view>
    </view>
    <!-- 帖子详情 -->
    <slot>
      <!-- 内容图片 -->
      <view class="cu-bar" @tap="openDetail">
        <image
          v-if="props.item.titlepic"
          :src="item.titlepic"
          style="width: 100%; height: 300rpx"
          mode="scaleToFill"
        />
      </view>
    </slot>
    <!-- 图片下面按钮 -->
    <view class="cu-bar" style="display: flex; justify-content: space-around; align-items: center">
      <!-- 点赞 -->
      <view
        class=" shadow-blur round animated"
        hover-class="animate__jello color"
        @tap="doSupport('support')"
        :class="
          item.support.type === 'support' && props.item.support.support_count > 0
            ? 'color1'
            : '.light'
        "
      >
        <text class="iconfont icon-liked" style="margin-right: 20rpx"></text>
        <text
          style="width: 66rpx"
        >{{ props.item.support.support_count > 0 ? props.item.support.support_count : '点赞' }}</text>
      </view>
      <!-- 点踩 -->
      <view
        class=" shadow-blur round animated"
        hover-class="animate__jello color"
        @tap="doSupport('unsupport')"
        :class="item.support.type === 'unsupport' ? 'color1' : '.light'"
      >
        <text class="iconfont icon-nozan" style="margin-right: 20rpx"></text>
        <text
          style="width: 66rpx"
        >{{ props.item.support.unsupport_count > 0 ? props.item.support.unsupport_count : '点踩' }}</text>
      </view>
      <!-- 评论 -->
      <view
        class=" shadow-blur round animated"
        hover-class="animate__jello color"
        @tap="doComment"
      >
        <text class="iconfont icon-31pinglun" style="margin-right: 20rpx"></text>
        <text style="width: 80rpx">{{ item.comment_count > 0 ? item.comment_count : '评论' }}</text>
      </view>

      <!-- 分享 -->
      <!-- <view
        class="cu-btn shadow-blur round animated"
        hover-class="animate__jello color"
        @tap="doShare"
      >
        <text class="iconfont icon-fenxiang" style="margin-right: 20rpx"></text>

        <text style="width: 80rpx">{{ item.sharenum > 0 ? item.sharenum : '分享' }}</text>
      </view>-->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed,getCurrentInstance } from 'vue'
import { defineEmits } from 'vue'
import { guanzhushequAPI, zanAPI, getsearchAPI } from '@/services/shequ'
import { guanzhuStore, myStore } from '@/stores'
import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
const guanzhu = guanzhuStore()
const user = myStore()
const { proxy } = getCurrentInstance() as any
// 写props
const props = defineProps<{
  item: Object
  index: { type: Number; default: -1 }
  pretime: number
  index1: number
  isdetail: boolean
  isgeren: { type: Boolean; default: false }
}>()

onReady(() => {
  console.log('hhhhhhhhhhhsdh', props.item)
  console.log(props.item, '看看对象1111')
  console.log(props.item.create_time / 1, '我看看时间111')
  time.value = formatMessageDate(props.item.create_time / 1)
})
const emit = defineEmits(['follow', 'doSupport', 'doComment', 'doShare'])
// 打开个人空间
const openSpace = () => {
  // 跳转到个人空间
  if (props.isgeren) {
    console.log("触发了多少");

    uni.navigateTo({
      url:
        '../../pagesA/user-space/index?gerenail=' +
        JSON.stringify(props.item) +
        '&index=' +
        props.index,
    })

  }
}
// 关注
const follow = (index) => {
  // this.$emit('follow', props.item)  改成ts vue3
  // 因为vue规定不能改动props里的数据，所以要用 $emit把数据传给父组件
  if (!user.userinfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }
  // 确认关注吗
  uni.showModal({
    title: '确定关注吗',
    content: '确认关注后，你将收到该用户的消息',
    confirmText: '确定',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        //  改变 关注状态在pinia
        guanzhu.guanzhuid('true')
        guanzhu.itemid(props.item)
        // 发送请求关注数据
        await guanzhushequAPI({
          item: props.item,
          user: user.userinfo,
        })
        // 确认关注
        uni.showToast({
          title: '关注成功',
        })
        emit('follow', index, props.index1, props.item)
      }
    },
  })
}
// 取消关注
const follow1 = (index) => {
  if (!user.userinfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }
  // 确认取消关注吗
  uni.showModal({
    title: '确定取消关注吗',
    content: '取消关注后，你将不再收到该用户的消息',
    confirmText: '取消关注',
    cancelText: '取消',
    success: async (res) => {
      if (res.confirm) {
        guanzhu.guanzhuid('false')
        guanzhu.itemid(props.item)
        // 发送请求关注数据
        await guanzhushequAPI({
          item: props.item,
          user: user.userinfo,
        })
        // 确认取消关注
        uni.showToast({
          title: '取消关注成功',
        })
        // 取消关注
        emit('follow', index, props.index1, props.item)
      }
    },
  })
}
// 进去详情
const openDetail = () => {
  if (props.isdetail) return
  // 跳转到详情
  uni.navigateTo({
    url:
      '../../pagesA/wenz-detail/index?wenzdetail=' +
      JSON.stringify(props.item) +
      '&index=' +
      props.index,
  })
}
// 点赞
const doSupport = async (type: string) => {
  if (!user.userinfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }
  await zanAPI({
    user: user.userinfo,
    item: props.item,
    type,
  })
  // 通知父组件
  emit('doSupport', {
    type,
    index: props.index,
    index1: props.index1,
  })
}
// 点击评论
const doComment = () => {
  if (!user.userinfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }
  if (!props.isdetail) return openDetail()
  emit('doComment')
}
// 分享
const doShare = () => {
  if (!user.userinfo) {
    uni.showModal({
      title: '提示',
      content: '请先登录',
      success: (res) => {
        if (res.confirm) {
          uni.navigateTo({
            url: '/pages/login/login',
          })
        }
      },
    })
    return
  }
  // 跳转到分享
  if (!props.isdetail) return openDetail()
  emit('doShare')
}
//改变时间
let time = ref('')
console.log(props.item, '看看对象')
console.log(props.item.create_time / 1, '我看看时间')
</script>

<style lang="scss">
@import url('../animate.min.css');

.jello {
  animation: jello 1s infinite;
}
.color {
  color: rgb(0, 255, 72);
}
.color1 {
  color:#3e3c6df2;
}
</style>
